<template>
  <div class="view-player">
    <div ref="video_container" class="video-player vjs-custom-skin">
      <div class="video-js"></div>
    </div>
  </div>
</template>

<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.min.css'

export default {
  props: {
    url: {
      default: ''
    },
    type: {
      default: 'video/mp4'
    },
    options: {
      type: Object,
      default () {
        return {}
      }
    }
  },

  data () {
    return {}
  },

  methods: {
    // 初始化视图
    initView() {},
    // 播放
    play() {
      this.build(() => {
        this.videoPlayer.play()
      })
    },
    build (callback) {
      this.clearPlayer()
      let id = 'video_' + parseInt(Date.now() * Math.random())
      this.id = id
      this.$refs.video_container.innerHTML = '<video id="' + id + '" class="video-js"></video>'
      this.buildPlayer(callback)
    },
    // 生成播放器
    buildPlayer (callback) {
      this.videoPlayer = videojs(this.id, Object.assign({
        preload: 'auto', // 自动加载资源
        autoplay: false,//自动播放
        fluid: true, // 自适应宽高
        muted: false, // 是否静音
        loop: false, //是否循环播放
        inactivityTimeout: false,
        language: 'zh-CN', // 设置语言，语言需要使用videojs.addLanguage()进行添加。
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        controls: true, // 是否显示控制条
        controlBar: { // 设置控制条组件
          // 设置控制条里面组件的相关属性及显示与否
          'currentTimeDisplay': true,
          'timeDivider': true,
          'durationDisplay': true,
          'remainingTimeDisplay': false,
          volumePanel: {
            inline: false,
          },
          /* 使用children的形式可以控制每一个控件的位置，以及显示与否 */
          children: [
            {name: 'playToggle'}, // 播放按钮
            {name: 'currentTimeDisplay'}, // 当前已播放时间
            {name: 'progressControl'}, // 播放进度条
            {name: 'durationDisplay'}, // 总时间
            {name: 'audioTrackButton'},
            { // 倍数播放
              name: 'playbackRateMenuButton',
              'playbackRates': [0.5, 1, 1.5, 2, 2.5]
            },
            {
              name: 'volumePanel', // 音量控制
              inline: false, // 不使用水平方式
            },
            {name: 'AutoPlayNext'},     // 控制是否自动播放下一个
            {name: 'FullscreenToggle'} // 全屏
          ]
        }
      }, this.options), function () {
        // console.log('Video Load Completed!')
      })
      this.videoPlayer.ready(() => {
        if (!this.url) {
          return true
        }
        let source = [
          {
            src: this.url,
            type: this.type
          }
        ]
        this.videoPlayer.src(source)
        if (typeof callback === 'function') {
          callback()
        }
      })
    },
    // 清除播放器
    clearPlayer () {
      if (this.videoPlayer) {
        this.videoPlayer.dispose()
        this.videoPlayer = null
      }
    }
  }
}
</script>

<style lang="less">
.view-player {
  flex: 1;
  margin: 0 auto;
}
.video-player {
  width: 100%;
  height: 100%;
}
.video-js.vjs-fluid,
.video-js.vjs-16-9,
.video-js.vjs-4-3 {
  padding: 0 !important;
  height: 100% !important;
}
.vjs-custom-skin>.video-js .vjs-big-play-button {
  font-size: 1.5rem;
}
.video-js {
  min-height: 180px;
}
</style>
